<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/vant.index.css">
    <link rel="stylesheet" href="../css/iconfont.css">

    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/blt_row_box.css">
    <link rel="stylesheet" href="../css/blt_zx.css">
    <title>个人信息</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            box-sizing: border-box;
            font-family: Open Sans, Helvetica Neue, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        }

        [v-cloak] {
            display: none;
        }

        .headbar {
            position: fixed;
            width: 100%;
            top: 0;
            height: 50px;
            /*background-color: yellow;*/
            z-index: 2002;
        }

        .headbar .backbtn {
            /*background-color: yellow;*/
        }

        .headbar .backbtn i {
            display: block;
            margin-top: 30px;
            margin-left: 10px;
            width: 60px;
            /*background-color: yellow;*/
        }

        .headbar .backbtn i.iconfont {
            font-size: 20px;
        }

        .blt_userInfor {
            /*position: fixed;*/
            width: 100%;
            height: 200px;
            top: 0;
            height: auto;
            background-color: white;
            color: rgb(160, 160, 160);
            border-bottom: 1px solid rgb(245, 245, 245);
            /*z-index: 2002;*/
        }

        .blt_userInfor .bpic {
            width: 100%;
            height: 150px;
            background-size: cover;
            background-image: url('../images/system_image/userbg.png');
        }

        .blt_userInfor .face {
            position: absolute;
            left: 20px;
            top: 110px;
            width: 80px;
            height: 80px;
            padding: 2px;
            border-radius: 50%;
            background-color: white;
        }

        .blt_userInfor .face img {
            width: 100%;
            height: 100%;
            border-radius: 50%
        }

        .blt_userInfor .detials {
            padding-top: 50px;
            padding-left: 20px;
        }

        .blt_userInfor .detials p {
            margin: 0 auto;
        }

        .blt_userInfor .detials p.name {
            color: rgb(54, 54, 54);
            font-size: 20px;
            font-weight: 600;
            /*background-color: yellow;*/
        }

        .blt_userInfor .detials .follow_fans {
            margin-top: 5px;
            font-size: 12px;
            font-weight: 600;
            /*background-color: yellow;*/
        }

        .blt_userInfor .detials .follow_fans span {
            margin-right: 5px;
        }

        .blt_userInfor .detials p.say {
            padding-top: 5px;
            padding-bottom: 10px;
            color: rgb(251, 114, 153);
            padding-right: 10px;
        }

        .blt_userInfor .updatabtn {
            position: absolute;
            right: 10px;
            top: 170px;
        }

        .blt_userInfor .updatabtn span {
            padding: 5px;
            border-radius: 6px;
            border: 1px solid rgb(160, 160, 160);
        }

        .van_tab_blt_blank .find_null {
            padding-top: 50px;
            text-align: center;
            /*background-color: yellow;*/
        }

        .van_tab_blt_blank .find_null span {
            font-size: 20px;
            font-weight: 800;
            color: rgb(221, 221, 221);
        }

        .chechbtn {
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="container" v-cloak>
        <div class="headbar">
            <div class="backbtn"><i class="iconfont icon-to-left" onclick="window.history.go(-1);">返回</i></div>
        </div>
        <div class="blt_userInfor">
            <div class="bpic"></div>
            <div class="face"><img :src="userInfo.blt_avatar" alt="" @click="ChangeAvatar"></div>
            <div class="detials">
                <p class="name">{{ userInfo.blt_name }}</p>
                <div class="follow_fans">
                    <span>{{ userInfo.blt_follow }}</span>关注&nbsp;&nbsp;-&nbsp;&nbsp;<span>{{ userInfo.blt_fans }}</span>粉丝
                </div>
                <p class="say">{{ userInfo.blt_say }}</p>
            </div>
            <div class="updatabtn"><span @click="ChangeSay">编辑信息</span></div>
        </div>
        <div class="van_tab_blt_blank">
            <div class="BLT_Row_Box">
                <div class="title"><span>收藏</span><i class="iconfont icon-jiantou3"></i>
                </div>
                <div class="list">
                    <div class="item_body">
                        <div class="item" v-for="it in messageList" v-cloak>
                            <div class="message">
                                <div class="frontPicture"><img :src="it.frontPicture" alt="">
                                </div>
                                <div class="first_title"> {{it.first_title}} </div>
                                <div class="bottom-bar">
                                    <div class="item">
                                        <span class="Informationdetails">{{it.InformationdetailsLike}} 喜欢 · {{it.InformationdetailsComment}} 评论 </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="BLT_Row_Box">
                <div class="title"><span>相关</span><i class="iconfont icon-jiantou3"></i></div>
                <div class="list">
                    <div class="item_body">
                        <div class="item" v-for="it in messageList" v-cloak>
                            <div class="message">
                                <div class="frontPicture"><img :src="it.frontPicture" alt=""></div>
                                <div class="first_title"> {{it.first_title}} </div>
                                <div class="bottom-bar">
                                    <div class="item">
                                        <span class="Informationdetails">{{it.InformationdetailsLike}} 喜欢 · {{it.InformationdetailsComment}} 评论 </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-action-sheet v-model="action_sheet_show" :actions="actions" cancel-text="取消" description="更换头像"></van-action-sheet>
        <!-- <van-uploader :after-read="afterRead" /> -->
        <van-popup v-model="van_popup_show" :style="{ height: '60%',width:'80%' }" />
        <van-cell-group>
            <van-field v-model="updata_name" maxlength="10" placeholder="昵称" show-word-limit>
            </van-field>
            <van-field v-model="updata_say" rows="2" autosize type="textarea" maxlength="45" placeholder="签名" show-word-limit>
            </van-field>
        </van-cell-group>
        <div class="chechbtn">
            <van-button round type="info" @click="Updata_say_name($event)" text="保存"></van-button>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery2.0.0.min.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script src="../script/vant.min.js"></script>
<script src="../script/local_db.js"></script>
<script type="text/javascript">
    var url = '../index.html';
    var user = $api.getStorage('userInfo');
    if (user == null) {
        window.location.href = url;
    }
    var app = new Vue({
        el: '#container',
        data: {
            van_tab_title: ['主页', '收藏', '相关'],
            updata_name: user.blt_name,
            updata_say: user.blt_say,
            messageList: $lcdb.get(),
            action_sheet_show: false,
            van_popup_show: false,
            actions: [{
                name: '从相册中选择'
            }],
            userInfo: user
        },
        methods: {
            ChangeAvatar: function(data) {
                this.action_sheet_show = true;
            },
            ChangeSay: function(data) {
                this.van_popup_show = true;
            },
            Updata_say_name: function(data) {//本地更改个人信息
                var _this = this;
                user.blt_name=user.updata_name;
                user.blt_say=app.updata_say;
                $api.setStorage('userInfo', user);
                setTimeout(function() {
                    _this.$toast({
                        message: '修改成功',
                        position: 'bottom'
                    });
                    _this.van_popup_show = false;
                    window.location.reload();
                }, 1000);
            }
        }
    });
</script>

</html>
